<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号留存</title>

    <script charset="utf-8" type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="/js/com.wxd.js"></script>
    <script charset="utf-8" type="text/javascript" src="/pageview.js"></script>

    <link rel="stylesheet" type="text/css" href="/style/com.wxd.css"/>
    <link rel="stylesheet" type="text/css" href="/style/table.css"/>

    <style>
        html, body {display: block;width: 100%;height: 100%;overflow: hidden;overflow-x: auto;background: rgb(255, 255, 255);}

        a:link {color: #0866b4;}

        a:visited { color: #0866b4;}

        label {padding-left: 5px;padding-right: 5px;}

        .tableDom table thead th, .tableDom table tbody td {text-align: center;}
    </style>

    <script>

        let pageView;

        function search() {
            wxd.loading();
            let urlQuery = new wxd.Map().loadSearch();
            urlQuery.put("minDay", $("#minDay").val());
            urlQuery.put("maxDay", $("#maxDay").val());
            pageView.remoteGetData(urlQuery);
        }


        function createRow(index, row) {
            let tr = `
    <tr>
        <td tips="true" style="width: 50px;">${index}</td>
        <td tips="true" style="width: 80px;">${row.uid}</td>
        <td tips="true" style="width: 70px;">${row.registerNum}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["2"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["3"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["4"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["5"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["6"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["7"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["8"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["9"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["10"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["11"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["12"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["13"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["14"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["15"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["16"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["17"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["18"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["19"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["20"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["30"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["40"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["50"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["60"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["70"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["80"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["90"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["100"]}</td>
        <td tips="true" style="width: 70px;">${row.dayStatNumMap["120"]}</td>
    </tr>
`;
            return tr;
        }


        $(() => {
            pageView = new PageView("/stat/account/list", search, createRow);
            search();
        });

    </script>

</head>

<body>
<div class="btn_box" style="padding-left: 10px; padding-top: 8px; text-align: left;vertical-align: center;">
    <button class="submit" type="button" onclick="search();">搜索</button>
    <label for="minDay">范围日期-开始日期: </label><input id="minDay" type="date"/>
    <label for="maxDay">范围日期-结束日期: </label><input id="maxDay" type="date"/>
</div>
<div class="tableDom" style="position: absolute;left: 10px;top: 80px;right: 15px;bottom: 35px;">
    <table>
        <thead>
        <tr>
            <th style="width: 50px;">序号</th>
            <th style="width: 80px;">日期</th>
            <th style="width: 70px;">注册</th>
            <th style="width: 70px;">次留</th>
            <th style="width: 70px;">3留</th>
            <th style="width: 70px;">4留</th>
            <th style="width: 70px;">5留</th>
            <th style="width: 70px;">6留</th>
            <th style="width: 70px;">7留</th>
            <th style="width: 70px;">8留</th>
            <th style="width: 70px;">9留</th>
            <th style="width: 70px;">10留</th>
            <th style="width: 70px;">11留</th>
            <th style="width: 70px;">12留</th>
            <th style="width: 70px;">13留</th>
            <th style="width: 70px;">14留</th>
            <th style="width: 70px;">15留</th>
            <th style="width: 70px;">16留</th>
            <th style="width: 70px;">17留</th>
            <th style="width: 70px;">18留</th>
            <th style="width: 70px;">19留</th>
            <th style="width: 70px;">20留</th>
            <th style="width: 70px;">30留</th>
            <th style="width: 70px;">40留</th>
            <th style="width: 70px;">50留</th>
            <th style="width: 70px;">60留</th>
            <th style="width: 70px;">70留</th>
            <th style="width: 70px;">80留</th>
            <th style="width: 70px;">90留</th>
            <th style="width: 70px;">100留</th>
            <th style="width: 70px;">120留</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
</body>
</html>